<template>
  <el-card>
    <!-- 顶部内容 -->
    <div class="header-container">
      <!-- 左侧内容 -->
      <div class="left">
        <div class="container-left">
          <el-input
            v-model="username"
            placeholder="根据用户名搜索"
            style="margin-right: 10px"
          />
          <el-button size="small" @click="handleEmpty">清空</el-button>
          <el-button
            size="small"
            type="primary"
            style="background-color: #409eff; color: #fff"
            @click="handleSearch"
          >
            确定
          </el-button>
        </div>
      </div>
      <div class="right">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          style="background: #67c23a; color: #fff"
          @click="showUserAdd = true"
        >
          新增用户
        </el-button>
      </div>
    </div>
    <!-- 文字提示 -->
    <el-alert title="消息提示的文案" type="info" show-icon :closable="false" />
    <!-- 表格区域 -->
    <el-table :data="tableData">
      <el-table-column
        label="序号"
        type="index"
        :index="indexMethod"
        width="180"
      />
      <el-table-column label="邮箱" prop="email" />
      <el-table-column label="联系电话" prop="phone" />
      <el-table-column label="用户名" prop="username" />
      <el-table-column label="权限组名称" prop="permission_group_title" />
      <el-table-column label="角色" prop="role" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEditDia(row.id)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handelUserDel(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page="queryInfo.page"
        :page-size="queryInfo.pagesize"
        :page-sizes="[1, 2, 3, 10]"
        layout=" sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增弹框 -->
    <el-dialog
      title="新增用户"
      :visible="showUserAdd"
      width="50%"
      @close="handleAddClose"
    >
      <el-form ref="form" :model="AddForm" label-width="150px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="AddForm.username" style="width: 80%" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="AddForm.email" style="width: 80%" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="AddForm.password" style="width: 80%" readonly />
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="AddForm.role" style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限组名称" prop="permission_group_id">
          <el-select
            v-model.number="AddForm.permission_group_id"
            placeholder="请选择"
            style="width: 80%"
          >
            <el-option label="超级管理组" :value="2" />
            <el-option label="编辑组" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="AddForm.phone" style="width: 80%" />
        </el-form-item>
        <el-form-item label="介绍">
          <el-input
            v-model="AddForm.introduction"
            type="textarea"
            style="width: 80%"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="handleAddClose">取 消</el-button>
        <el-button
          type="primary"
          style="background-color: #409eff; color: #fff"
          @click="handleAddUser"
        >
          确 定
        </el-button>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog
      title="新增用户"
      :visible="showUserEdit"
      width="50%"
      @close="handleEditClose"
    >
      <el-form ref="form" :model="AddForm" label-width="150px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="AddForm.username" style="width: 80%" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="AddForm.email" style="width: 80%" />
        </el-form-item>

        <el-form-item label="角色">
          <el-input v-model="AddForm.role" style="width: 80%" />
        </el-form-item>
        <el-form-item label="权限组名称" prop="permission_group_id">
          <el-select
            v-model.number="AddForm.permission_group_id"
            placeholder="请选择"
            style="width: 80%"
          >
            <el-option label="超级管理组" :value="2" />
            <el-option label="编辑组" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="AddForm.phone" style="width: 80%" />
        </el-form-item>
        <el-form-item label="介绍">
          <el-input
            v-model="AddForm.introduction"
            type="textarea"
            style="width: 80%"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="handleEditClose">取 消</el-button>
        <el-button
          type="primary"
          style="background-color: #409eff; color: #fff"
          @click="handleEditUser"
        >
          确 定
        </el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getUserListAPI,
  addUserAPI,
  delUserAPI,
  getUserDetailAPI,
  putUserInfoAPI
} from '@/api/base-users'
export default {
  // 组件名称
  name: 'UserView',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      // 表格数据
      tableData: [],
      // 请求数据
      queryInfo: {
        page: 1,
        pagesize: 10
      },
      // 列表总数
      total: 0,
      // 控制新增弹窗显示
      showUserAdd: false,
      // 表单数据
      AddForm: {
        password: '123456',
        username: '',
        phone: '',
        permission_group_id: '',
        avatar: '',
        email: '',
        role: '',
        introduction: ''
      },
      // 控制编辑弹框
      showUserEdit: false,
      // 搜索使用的
      username: ''
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getUserList()
  },
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
  // 组件方法
  methods: {
    // 获取表格数据
    async getUserList(username = '') {
      const data = await getUserListAPI({
        ...this.queryInfo,
        username
      })
      // console.log(data)
      this.total = data.data.counts
      this.tableData = data.data.list
    },
    // 自定义序号
    indexMethod(index) {
      return index + 1 + (this.queryInfo.page - 1) * this.queryInfo.pagesize
    },
    // 条数发生变化时
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      // 重新获取列表
      this.getUserList()
    },
    // 页码发生变化时
    handleCurrentChange(val) {
      this.queryInfo.page = val
      this.getUserList()
    },
    // 关闭新增弹框
    handleAddClose() {
      this.showUserAdd = false
    },
    // 新增用户
    async handleAddUser() {
      // 发请求
      await addUserAPI(this.AddForm)
      // console.log(res)
      // 关闭弹窗
      this.handleAddClose()
      // 刷新列表

      this.getUserList()
    },
    // 删除用户
    async handelUserDel(id) {
      // console.log(id)
      try {
        await this.$confirm('确定要删除嘛', '提示', {
          type: 'warning'
        })
        await delUserAPI(id)
        // console.log(res)
        // 刷新列表
        this.getUserList()
        this.$message.success('删除成功')
      } catch (e) {
        //
        this.$message.info('已取消')
      }
    },
    // 关闭编辑弹窗
    handleEditClose() {
      this.showUserEdit = false
    },
    // 打开编辑弹框
    async handleEditDia(id) {
      // 保存要编辑的用户id
      this.EditId = id.data
      this.showUserEdit = true
      console.log(id)
      // 发请求
      const res = await getUserDetailAPI(id)
      this.AddForm = res.data
    },
    // 编辑用户
    async handleEditUser() {
      // 整体校验
      // 发请求
      await putUserInfoAPI(this.EditId, {
        avatar: this.AddForm.avatar,
        email: this.AddForm.email,
        id: this.AddForm.id,
        introduction: this.AddForm.introduction,
        permission_group_id: this.AddForm.permission_group_id,
        phone: this.AddForm.phone,
        role: this.AddForm.role,
        username: this.AddForm.username
      })
      // 关闭弹窗
      this.handleEditClose()
      // 刷新页面
      this.getUserList()
      this.$message.success('编辑成功')
    },
    // 清空搜索框值
    handleEmpty() {
      this.username.data = ''
      this.getUserList()
    },
    handleSearch() {
      // 搜索了
      console.log('搜索了')
      this.getUserList(this.username)
      console.log(1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped lang="scss">
/* .el-card {
  margin: 20px;
  margin-top: 90px;
} */
::v-deep .el-dialog__header {
  background: blue;
  color: white;
}
::v-deep .el-dialog__title {
  color: white;
}
.header-container {
  display: flex;
  justify-content: space-between;
  .container-left {
    display: flex;
  }
}
.el-alert {
  margin-top: 20px;
}
.el-button--primary {
  color: #409eff;
  background-color: #ecf5ff;
  &:hover {
    color: #fff;
    background-color: #409eff;
  }
}
.el-button--danger {
  color: #f56c6c;
  background-color: #fef0f0;
  &:hover {
    color: #fef0f0;
    background-color: #f56c6c;
  }
}
.pagination {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
</style>
